
<template>
  <div class="disc">
    <ul>
      <li class="disc-item" v-for="(v,i) in discList" :key="i" @click="selectAblum(v)">
        <img class='disc-image' v-lazy='v.cover' alt="" @load="imgLoad">
        <div class="text">
          <h2 class="disc-name no-wrap">{{v.title}}</h2>
          <p class="disc-desc no-wrap">{{v.username}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    discList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {}
  },
  methods: {
    selectAblum(item) {
      if (item.content_id) {
        this.$store.commit('setValue', '歌单')
        this.$store.commit('setSongCover', item)
        this.$router.push('/songlist/' + item.content_id)
      } else if (item.albumMID) {
        this.$store.commit('setALbum', item)
        this.$store.commit('setValue', '专辑')
        this.$router.push('/album/' + item.albumMID)
      }
    },
    imgLoad() {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.$emit('img-load')
      }, 300)
    }
  }
}
</script>

<style scoped>
.disc {
  /* position: absolute; */
  padding: 0 20px;
}
.disc-item {
  padding: 5px;
  display: flex;
}
.disc-image {
  width: 60px;
  height: 60px;
  border-radius: 5px;
  margin-right: 10px;
}
.disc-desc,
.disc-name {
  color: #fff;
  width: 260px;
  font-size: 14px;
}
.disc-desc {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.3);
}
</style>